<template>
  <div>
    <!-- 锚点 hash  -->
    <!-- <a href="#/login">login</a> &nbsp;
    <a href="#/info">info</a> -->
    <!-- 在vue中不会用a标签来实现切换,用一个vue-router提供的内置组件,它的功能比a标签要更强大 -->
    <!-- from...to...  -->
    <!-- router-link这个内置 组件会产生二个类名
    router-link-active 模糊匹配类名
    router-link-exact-active 精确匹配类名 -->

    <!-- 声明式导航  -->
    <router-link to="/login">login</router-link>&nbsp;
    <router-link to="/info">info</router-link>&nbsp;
    <router-link to="/info/abc">info/abc</router-link>&nbsp;
    <button @click="fn">login</button>&nbsp;
    <router-link to="/user?id=1">第一个用户</router-link>&nbsp;
    <router-link to="/user?id=2">第二个用户</router-link>&nbsp;
    <button @click="fn1">第3个用户</button>&nbsp;
    <button @click="fn1">第3个用户</button>&nbsp;
    <router-link to="/article/1">第一个文章</router-link>&nbsp;
    <router-link to="/article/2">第二个文章</router-link>&nbsp;
    <button @click="fn2">第三个文章</button>&nbsp;
    <button @click="fn3">返回</button>&nbsp;
    <router-link to="/zhejiang/hangzhou">杭州</router-link>&nbsp;
    <router-link to="/zhejiang/wenzhou">温州</router-link>&nbsp;
    <!-- 占位符 一级占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    fn() {
      // 编程式导航;
      this.$router.push("/login");
    },
    fn1() {
      // this.$router.push("/user?id=3");
      this.$router.push({ path: "/user", query: { id: 3 } });
    },
    fn2() {
      // this.$router.push("/article/3");
      // 路径参数如果想用对象的方式来写，只能用name不能用path
      this.$router.push({ name: "article", params: { id: 3 } });
    },
    fn3() {
      // 这二个意思都是返回上一个路由
      // this.$router.go(-1);
      this.$router.back();
    },
  },
};

// axios.get('url?id=1')
// axios.get('url',{params:{id:1}})

// /api/books?id=1&a=2&b=3 查询参数
// /api/books/1/2/3?id=2 路径参数  参数是属于路径的一部分
</script>

<style scoped>
.router-link-active {
  color: orangered;
}
</style>
